<template>
  <div style="height:100%;">
    <div class="top" @click="headBack"></div>
    <div class="nav-content">
      <tab :line-width=2 :active-color='activeColor' custom-bar-width="3.5rem"  v-model="index">
        <tab-item class="vux-center" :selected="itemIndex === index" v-for="(item, index) in navList" @on-item-click="handler(index, item)" :key="index">{{item}}</tab-item>
      </tab>
      <slot></slot>
      <div class="price-content" v-if="isShowBtn">
        <p><span class="symbol">￥</span><span class="price">{{salePrice}}</span></p>
        <div class="price-btn" @click="bookingTicket">立即预订</div>
      </div>
      <div @click="closePopupContent" :class="isShowBtn ? 'styleNoBottom' : 'styleContent'">
        <swiper v-model="itemIndex" height="100%" :show-dots="false" :show-desc-mask="false" style="height: 100%">
          <swiper-item>
            <div v-if="typeNum === 1" class="tab-swiper vux-center tab-detail">
              <h2>成人退改签说明</h2>
              <div class="tab-detail-content">
                <div class="tab-detail-title">退票<br>手续费</div>
                <div class="tab-detail-num">
                  <p class="tab-all-title" v-if="isShowBagTurn"  v-text="refundMonmeyTitle"></p>
                  <div class="flex-box">
                    <div class="title">
                      <p v-for="(item,index) in beforeRefundTime" :key="index"><i class="iconfont icon-shijian2"></i>{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="(item,index) in beforeRefundMoney" :key="index">
                        <span v-if="parseInt(item) !== 0">￥<span>{{item}}</span>/人</span>
                        <span v-if="parseInt(item) === 0">免费退票</span>
                      </p>
                    </div>
                  </div>
                  <p class="tab-all-title" v-if="isShowBagTurn">返程退票费</p>
                  <div class="flex-box" v-if="isShowTurnTwice">
                    <div class="title">
                      <p v-for="(item,index) in beforeRefundTime2" :key="index"><i  class="iconfont icon-shijian2"></i>{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="(item,index) in beforeRefundMoney2" :key="index">
                        <span v-if="parseInt(item) !== 0">￥<span>{{item}}</span>/人</span>
                        <span v-if="parseInt(item) === 0">免费退票</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-detail-content">
                <div class="tab-detail-title">同舱<br>改期费</div>
                <div class="tab-detail-num">
                  <p class="tab-all-title" v-if="isShowBagTurn" v-text="changeMonmeyTitle"></p>
                  <div class="flex-box">
                    <div class="title">
                      <p v-for="(item,index) in beforeRefundTime" :key="index"><i v-if="typeNum2 === 1" class="iconfont icon-shijian2"></i>{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="(item,index) in beforechangeMoney" :key="index">
                        <span v-if="parseInt(item) !== 0">￥<span>{{item}}</span>/人</span>
                        <span v-if="parseInt(item) === 0">免费改期</span>
                      </p>
                    </div>
                  </div>
                  <p class="tab-all-title" v-if="isShowBagTurn">返程改期费</p>
                  <div class="flex-box" v-if="isShowTurnTwice">
                    <div class="title">
                      <p v-for="(item,index) in beforeRefundTime2" :key="index"><i v-if="typeNum2 === 1" class="iconfont icon-shijian2"></i>{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="(item,index) in beforechangeMoney2" :key="index">
                        <span v-if="parseInt(item) !== 0">￥<span>{{item}}</span>/人</span>
                        <span v-if="parseInt(item) === 0">免费改期</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-detail-turn">
                <div class="tab-detail-title">签转</div>
                <div class="tab-detail-num">
                  {{isTurnTicket}}
                </div>
              </div>
              <p class="warn-text">如有变动,以航空公司最新退改签规则为准</p>
            </div>
            <div v-if="typeNum === 2" class="tab-swiper vux-center tab-detail tab-detail-two">
              <h2>成人退改签说明</h2>
              <div class="tab-detail-content">
                <div class="tab-detail-title">退票<br>手续费</div>
                <div class="tab-detail-num">
                  <p class="tab-all-title" v-if="isShowBagTurn" v-text="refundMonmeyTitle"></p>
                  <div class="flex-box">
                    <div class="title" style="flex: 0 0 100%!important;">
                      <p v-for="item in beforeRefundTime">{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="item in beforeRefundMoney">￥<span>{{item}}</span>/人</p>
                    </div>
                  </div>
                  <p class="tab-all-title" v-if="isShowBagTurn">返程退票费</p>
                  <div class="flex-box" v-if="isShowTurnTwice">
                    <div class="title">
                      <p v-for="(item,index) in beforeRefundTime2" :key="index"><i  class="iconfont icon-shijian2"></i>{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="(item,index) in beforeRefundMoney2" :key="index">￥<span>{{item}}</span>/人</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-detail-content">
                <div class="tab-detail-title">同舱<br>改期费</div>
                <div class="tab-detail-num">
                  <p class="tab-all-title" v-if="isShowBagTurn" v-text="changeMonmeyTitle"></p>
                  <div class="flex-box">
                    <div class="title" style="flex: 0 0 100%!important;">
                      <p v-for="item in beforeRefundTime">{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="item in beforechangeMoney">￥<span>{{item}}</span>/人</p>
                    </div>
                  </div>
                  <p class="tab-all-title" v-if="isShowBagTurn">返程改期费</p>
                  <div class="flex-box" v-if="isShowTurnTwice">
                    <div class="title">
                      <p v-for="(item,index) in beforeRefundTime2" :key="index"><i v-if="typeNum2 === 1" class="iconfont icon-shijian2"></i>{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="(item,index) in beforechangeMoney2" :key="index">￥<span>{{item}}</span>/人</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-detail-turn">
                <div class="tab-detail-title">签转</div>
                <div class="tab-detail-num">
                  {{isTurnTicket}}
                </div>
              </div>
              <p class="warn-text">如有变动,以航空公司最新退改签规则为准</p>
            </div>
            <div v-if="typeNum === 3" class="tab-swiper vux-center tab-detail tab-detail-three">
              <h2>成人退改签说明</h2>
              <div class="tab-detail-content">
                <div class="tab-detail-title">退票<br>手续费</div>
                <div class="tab-detail-num">
                  <!--<p class="tab-all-title">全程退票费</p>-->
                  <p class="tab-all-title" v-text="refundMonmeyTitle"></p>
                  <div class="flex-box">
                    <div class="title" style="flex: 0 0 100%!important;">
                      <p>{{itemTimeOne}}</p>
                    </div>
                  </div>
                  <p class="tab-all-title" v-if="isShowBagTurn">返程退票费</p>
                  <div class="flex-box" v-if="isShowTurnTwice">
                    <div class="title">
                      <p v-for="(item,index) in beforeRefundTime2" :key="index"><i  class="iconfont icon-shijian2"></i>{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="(item,index) in beforeRefundMoney2" :key="index">￥<span>{{item}}</span>/人</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-detail-content">
                <div class="tab-detail-title">同舱<br>改期费</div>
                <div class="tab-detail-num">
                  <p class="tab-all-title" v-text="changeMonmeyTitle"></p>
                  <div class="flex-box">
                    <div class="title" style="flex: 0 0 100%!important;">
                      <p>{{itemTimeTwo}}</p>
                    </div>
                  </div>
                  <p class="tab-all-title" v-if="isShowBagTurn">返程改期费</p>
                  <div class="flex-box" v-if="isShowTurnTwice">
                    <div class="title">
                      <p v-for="(item,index) in beforeRefundTime2" :key="index"><i v-if="typeNum2 === 1" class="iconfont icon-shijian2"></i>{{item}}</p>
                    </div>
                    <div class="num">
                      <p v-for="(item,index) in beforechangeMoney2" :key="index">￥<span>{{item}}</span>/人</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-detail-turn">
                <div class="tab-detail-title">签转</div>
                <div class="tab-detail-num">
                  {{itemTimeThree}}
                </div>
              </div>
              <p class="warn-text">如有变动,以航空公司最新退改签规则为准</p>
            </div>
          </swiper-item>
          <swiper-item>
            <div class="tab-swiper vux-center tab-explain">
              <h2>去程行李说明</h2>
              <div class="tab-detail-content">
                <p class="tab-detail-title">免费手提行李</p>
                <p class="tab-detail-num">10公斤</p>
              </div>
              <div class="tab-detail-content">
                <p class="tab-detail-title">免费托运行李</p>
                <p class="tab-detail-num">{{baggage}}公斤</p>
              </div>
              <h2 v-if="isShowBagTurn">回程行李说明</h2>
              <div class="tab-detail-content" v-if="isShowBagTurn">
                <p class="tab-detail-title">免费手提行李</p>
                <p class="tab-detail-num">10公斤</p>
              </div>
              <div class="tab-detail-content" v-if="isShowBagTurn">
                <p class="tab-detail-title">免费托运行李</p>
                <p class="tab-detail-num">{{baggage2}}公斤</p>
              </div>
              <p class="warn-text">行李尺寸限制请咨询航空公司，如需购买额外超重托运行李额或随身携带乐器等特殊行李请致电客服</p>
            </div>
          </swiper-item>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { Tab, TabItem, Swiper, SwiperItem } from 'vux'
  import { Popup, TransferDomDirective as TransferDom} from 'vux'

  export default {
    name: 'flightQuitRule',
    data() {
      return {
        active: '退改详情',
        activeColor: '#46a1bb',
        itemIndex: 0
      }
    },
    props:{
      isShowBagTurn: {
        type: Boolean,
        default: false,
      },
      isShowTurnTwice: {
        type: Boolean,
        default: false,
      },
      refundMonmeyTitle: {
        type: String,
        default: '全程退票费:',
      },
      changeMonmeyTitle: {
        type: String,
        default: '全程改期费:',
      },
      isShowBtn: {
        type: Boolean,
        default: true,
      },
      itemTimeOne: {
        type: String,
        default: '',
      },
      itemTimeTwo: {
        type: String,
        default: '',
      },
      itemTimeThree: {
        type: String,
        default: '',
      },
      isTurnTicket: {
        type: String,
        default: '',
      },
      salePrice: {
        type: Number,
        default: 0
      },
      baggage: {
        type: Number,
        default: 20
      },
      baggage2: {
        type: Number,
        default: 20
      },
      typeNum: {
        type: Number,
        default: 1
      },
      typeNum2: {
        type: Number,
        default: 1
      },
      navList: {
        type: Array,
        default: []
      },
      beforeRefundTime2: {
        type: Array,
        default: () => []
      },
      beforeRefundTime: {
        type: Array,
        default: () => []
      },
      beforeRefundMoney: {
        type: Array,
        default: () => []
      },
      beforeRefundMoney2: {
        type: Array,
        default: () => []
      },
      beforechangeMoney: {
        type: Array,
        default: () => []
      },
      beforechangeMoney2: {
        type: Array,
        default: () => []
      }
    },
    components: {
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      Popup
    },
    directives: {
      TransferDom
    },
    methods: {
      handler(index, item) {
        this.itemIndex = parseInt(index);
      },
      headBack(e) {
        this.$emit('closePopupContent', e);
      },
      bookingTicket(e) {
        this.$emit('bookingTicket', e);
      },
      closePopupContent(e) {
        this.itemIndex = 0;
        this.$emit('closePopupContent', e);
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .styleNoBottom {
    height: calc(100% - 2.5rem - 44px)!important;
  }
  .styleContent {
    height: calc(100% - 44px)!important;
  }
  .top {
    width: 100%;
    height: 1.2rem;
  }
  .nav-content {
    height: calc(100% - 1.2rem);
    overflow-y: hidden;
  }
  .flex-box {
    display: flex;
    width:100%;
  }
  .price-content {
    position: fixed;
    padding: 0 1rem;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    border-top: 1px solid #ddd;
    box-sizing: border-box;
    z-index: 99;
    p {
      float: left;
      color: #888;
      font-size: .7rem;
      .symbol {
        font-size: .75rem;
        color: #f60;
      }
      .price {
        font-size: .85rem;
        color: #f60;
      }
    }
    .price-btn {
      float: right;
      margin-right: .5rem;
      margin-top: .5rem;
      width: 4.5rem;
      height: 1.5rem;
      line-height: 1.5rem;
      text-align: center;
      color: #fff;
      border-radius: 1rem;
      font-size: .8rem;
      background-color: #46a1bb;
    }
  }
  .tab-swiper {
    padding: 1.2rem .75rem 0 .75rem;
    color: #666;
    font-size: .7rem;
    .warn-text {
      margin-top: .8rem;
      line-height: 1.6em;
      font-size: .65rem;
      color: #999;
    }
    i {
      margin-right: .2rem;
    }
    h2 {
      font-size: .85rem;
      line-height: 2em;
      color: #333;
      font-weight: 600;
    }
    .tab-detail-turn {
      position: relative;
      display: flex;
      line-height: 3.6em;
      border-bottom: 1px solid #eee;
      .tab-detail-title {
        flex: 0 0 20%;
        padding-right: 6%;
        text-align: center;
      }
      .tab-detail-num {
        flex: 1;
        padding-left: 1rem;
      }
      &::after {
        position: absolute;
        display: inline-block;
        content: '';
        top: 0;
        left: 23%;
        width: .5px;
        height: 100%;
        background-color: #eee;
      }
    }
    .tab-detail-content:first-child {
      margin-top: .8rem;
    }
    .tab-detail-content:nth-child(3) {
      border-top: none;
    }
    .tab-detail-content {
      position: relative;
      padding: .7rem 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      .tab-detail-title {
        padding-right: 6%;
        flex: 0 0 20%;
        line-height: 1.6em;
        text-align: center;
        :not(:first-child) {
          margin-top: -1px;
        }
      }
      &::after {
        position: absolute;
        display: inline-block;
        content: '';
        top: 0;
        left: 23%;
        width: .5px;
        height: 100%;
        background-color: #eee;
      }
      .tab-detail-num {
        flex: 1;
        padding-left: 1rem;
        .tab-all-title {
          line-height: 2em;
        }
        .title{
          display: flex;
          flex-direction: column;
          flex: 0 0 60%;
          > p {
            line-height: 1.8em;
          }
        }
        .num {
          display: flex;
          flex-direction: column;
          flex: 0 0 40%;
          align-items: flex-end;
          > p {
            line-height: 1.8em;
          }
        }
      }
    }
  }
  .tab-swiper.tab-explain {
    h2 {
      margin-bottom: .8rem;
      line-height: 2em;
      border-bottom: 1px solid #eee;
    }
    .tab-detail-content {
      border: none;
      padding: 0;
      height: 2.2rem;
      .tab-detail-title {
        flex:  0 0 40%;
        padding-right: 0;
        text-align: left;
      }
      .tab-detail-num {
        flex: 1;
        padding-left: 0;
        text-align: right;
      }
      &::after {
        display: none;
      }
    }
  }
  .tab-detail-two .tab-detail-content {
    .title {
      flex: 0 0 80%!important;
    }
  }
</style>
